<template>
  <div class="login">
    <div class="login_info">
      <div class="login_title">
        <img src="@/assets/img/logo1.png" alt="" />
        <div class="logo_text">蓝精灵电影-后台管理系统</div>
      </div>
      <div class="login_form">
        <p>后台管理系统密码</p>
        <el-input
          v-model="password"
          placeholder="请输入密码"
          show-password
        ></el-input>
        <div class="manager">
          <el-link class="login_link" href="/login" :underline="false"
            >返回用户登录</el-link
          >
          &nbsp;
          <el-link class="login_link" href="/w_login" :underline="false"
            >返回客服登录</el-link
          >
        </div>
        
        <!-- 登录按钮 -->
        <div class="btn">
          <el-button
            class="login-form-button"
            type="primary"
            @click="loginClick()"
            >SIGN IN</el-button
          >
        </div>
        <div class="login_footer">
          <p class="register">Copyright 2022 蓝精灵影院 - 后台管理系统 Neusiri</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Login } from "@/api/user.js";
export default {
  data() {
    return {
      password: "",
    };
  },
  methods: {
    loginClick() {
      const LoginData = {
        password: this.password,
      };

      Login(LoginData).then((res) => {
        if (res.success == true) {
          this.$message({
            message: "成功登录后台管理系统",
            type: "success",
          });
          this.$router.push("/BackStage");
        } else {
          this.$message({
            message: "登录失败",
            type: "danger",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 400px;
  .login_info {
    width: 500px;
    margin: 50px auto;
    .login_title {
      height: 75px;
      img {
        width: 75px;
        height: 75px;
        float: left;
        margin-left: 20px;
      }
      .logo_text {
        float: left;
        line-height: 75px;
        font-size: 30px;
        font-weight: bold;
        margin-left: 30px;
      }
    }
    .login_form {
      height: 40px;
      line-height: 40px;
      font-weight: bold;
      color: #91949c;
      font-size: 16px;
      .manager{
        float: left;
        margin: 0 0 20px 0;
        .login_link {
          font-size: 16px;
          color: #91949c;
          font-weight: bold;
        }
      }
      .forget {
        float: right;
        margin: 0 0 20px 0;
        .login_link {
          font-size: 16px;
          color: #91949c;
          font-weight: bold;
        }
      }
      .btn {
        clear: both;
        .login-form-button {
          width: 100%;
          height: 50px;
          font-weight: bold;
          font-size: 16px;
        }
      }
      .login_footer {
        text-align: center;
        .register {
          height: 50px;
          line-height: 50px;
          font-weight: bold;
          text-align: center;
        }
      }
    }
  }
}
</style>